
<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="utf8">
	<title>格式转换</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="../layui/css/layui.css">

   
</head>
<body>
	<div class="container" style="padding: 50px;" >

		<div class="layui-row layui-col-space10 ">

			<div class="layui-col-md1">
				<button type="button" class="layui-btn" id="test1">
			  			<i class="layui-icon">&#xe67c;</i>
			  			上传文件
				</button>
			</div>
			<div class="layui-col-md1">
				<input id="opt" type="text"  autocomplete="off" placeholder="格式 若不填默认mp3" class="layui-input" >

			</div>

			<div class="layui-col-md2 ">

					<button id="bnt" class="layui-btn">
						开始上传
					</button>
			</div>

		</div>

			    	

					
	
			     	 

	</div>
	
</body>
</html>


<script src="../layui/layui.all.js"></script>


<script>


	$('#opt').blur(function(){

		var opt=this.value
		console.log(opt)
		up(opt)

	})

	up()

	function up(opt){

		var upload = layui.upload;

		var layer=layui.layer;

		if(opt==undefined){

			opt='mp3'
		}

		upload.render({

		     elem: '#test1' //绑定元素
		    ,url: 'zhuanhuan.php?options='+opt //上传接口
		    ,accept:'file'
		    ,auto:false
		    ,bindAction:'#bnt'
		    ,before:function(obj){

		    	 index = layer.load(1, {
					  shade: [0.1,'#fff'] //0.1透明度的白色背景
					});

		    }
		    ,done: function(res){

		      layer.close(index)

		      if($('#ti').length!==0){

		      		$('#ti').remove()

		      }

		      $btn=$("<a download='' href='"+res.data.src+"'><button id='ti' type='button' class='layui-btn'>下载</button></a>")

	    	 $('#bnt').after($btn)


		    }
		    ,error: function(){
		      //请求异常回调
		      layer.close(index)
		    }
	  	});


	}


</script>

	



